<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-card class="box-card">
          <el-tree
            style="height:300px;overflow:auto;"
            ref="deptTree"
            :props="props"
            :data="treeData"
            node-key="oid"
            accordion
            @node-click="handleNodeClick"
          >
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card class="box-card">
          <sysuserHome :key="deptId" :deptId="deptId" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { sysdeptService } from "../../../api/apiService";
import sysuserHome from "./sysuserHome.vue";

export default {
  data() {
    return {
      pid: "",
      deptId: "",
      props: {
        label: "name",
        children: "children"
      },
      treeData: []
    };
  },
  components: {
    sysuserHome
  },
  methods: {
    loadTree() {
      sysdeptService.tree().then(res => {
        let { data } = res;
        this.treeData = data;
      });
    },
    handleNodeClick(item) {
      //   console.log(item);
      this.deptId = item.oid;
    }
  },
  mounted() {
    this.loadTree();
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped></style>
